<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>

<head>
    <meta charset="UTF-8">
    <title>ADMIN</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body onload="onLoad(1)">

    <div class="app-page">
        <div class="app-page-header">
            <div class="page-title">
                <div class="title">终端日志</div>
                <div class="btn-group">
                    <a class="z-btn z-primary" onclick="uploadLog()">上传日志</a>
                </div>
            </div>
        </div>
        <div class="app-page-content">
            <div class="app-card z-mab">
                <div class="app-card-body">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">开始时间</div>
                                    <div class="body">
                                        <input type="text" name="startTime" class="flatpickr-datetime">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">结束时间</div>
                                    <div class="body">
                                        <input type="text" name="endTime" class="flatpickr-datetime">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="app-card">
                <div class="app-card-body">
                    <input type="hidden" id="deviceMac" name="deviceMac">
                    <table class="z-table">
                        <thead>
                            <th>名称</th>
                            <th>上传时间</th>
                            <th>操作</th>
                        </thead>
                        <tbody id="deviceLogBody"></tbody>
                    </table>
                    <!-- 前端分页 -->
                    <div class="pagination z-pat z-fr"></div>
                </div>
            </div>
        </div>
    </div>

            

    <!-- <div class="app-content">
        <div class="page-header">
            <div class="title">终端日志</div>
            <a class="z-btn z-primary" onclick="uploadLog()">上传日志</a>
        </div>
        <input type="hidden" id="deviceMac" name="deviceMac">
        <table class="z-table">
            <thead>
            <th>名称</th>
            <th>上传时间</th>
            <th>操作</th>
            </thead>
            <tbody id="deviceLogBody"></tbody>
        </table>
        <div class="app-card-body">
            <div class="pagination z-pat z-fr"></div>
        </div>
    </div> -->
    
</body>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content");

    var pagination = new Pagination(".pagination", {
        pageIndex: 0, // 当前页数
        pageSize: 0, // 每页数量
        count: 0, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function(pageIndex) {
            onLoad(pageIndex);
        }
    })

    /**
     * 页面数据加载初始化
     * @param pageIndex
     */
    function onLoad(pageIndex) {
        //解析父页面传递过来的参数
        var deviceMac = [[${deviceMac}]];
        $('#deviceMac').val(deviceMac);
        //通过ajax获取终端日志列表
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: context + '/deviceInfo/getLogs',
            data: {mac:deviceMac,pageNum:pageIndex},
            cache: false,
            async: true,
            success: function (result) {
                console.log(result);
                var page = result.data;
                var pageNum = page.pageNum;
                var pageSize = page.pageSize;
                var total = page.total;
                var array = page.logList;
                var str = "";
                $.each(array,function(index, n){
                    str = str+
                        "<tr>\n" +
                        "    <td>"+array[index].name+"</td>\n" +
                        "    <td>"+array[index].uploadTime+"</td>\n" +
                        "    <td class=\"btn-group\">\n" +
                        "       <a onclick='deleteLog("+array[index].deviceLogId+")'>删除</a>\n" +
                        "    </td>\n" +
                        "</tr>"
                });
                $('#deviceLogBody').html(str);

                pagination.options.count = total;
                pagination.options.pageSize = pageSize;
                pagination.options.pageIndex = pageNum;
                pagination.render();
            }
        });
    }

    /**
     * 删除终端日志
     */
    function deleteLog(deviceLogId) {
        if (confirm('确认是否删除')) {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: context + '/deviceInfo/deleteLog',
                data: {deviceLogId: deviceLogId},
                cache: false,
                async: true,
                success: function (data) {
                    alert(data.msg);
                    if (data.code == 0) { //操作成功，刷新当前页面
                        window.location.reload();
                    }
                }
            });
        }
    }

    /**
     * 上传终端日志
     */
    function uploadLog() {
        var deviceMac = $('#deviceMac').val();
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: context + '/deviceInfo/uploadLog',
            data: {mac:deviceMac},
            cache: false,
            async: true,
            success: function (data) {
                alert(data.msg);
                if(data.code == 0 ) { //操作成功，刷新当前页面
                    window.location.reload();
                }
            }
        });
    }
</script>
    <script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
    <script th:src="@{/lib/flatpickr/zh.js}"></script>
    <script>
        // 从URL加载搜索数据
        $(".filter").formLoad(App.query);

        flatpickr.localize(flatpickr.l10ns.zh);
        flatpickr(".flatpickr-datetime", {
            enableTime: true,
        });
    </script>
</html>